<template>
  <view-box ref="viewBox" body-padding-bottom="0" class="container">
    <!-- address lists -->
    <div class="address" v-for="(item, index) in list" :key="item.id">
      <div class="address-main vux-1px-b" @click="jumpReferPage(item)">
        <div class="addres-box">
          <p class="address-user">{{item.consignee}} {{item.phone}}</p>
          <p class="address-detail">{{item.province}} {{item.city}} {{item.district}} {{item.address}}</p>
        </div>
        <div class="refer-page" v-if="referPage"><span class="iconfont icon-fon10"></span></div>
      </div>
      <div class="actions">
        <div class="btn-set-default"><check-icon :value.sync="item.is_default" @click.native="setDefault(item)">设为默认</check-icon></div>
        <div class="btn-edit" @click="edit(item)"><i class="iconfont icon-jianyi"></i> 编辑</div>
        <div class="btn-delete" @click="destory(index)"><i class="iconfont icon-shanchu"></i> 删除</div>
      </div>
    </div>
     <box gap="20px 10px">
      <x-button type="warn" @click.native="add">添加地址</x-button>
    </box>
    <!-- popup -->
    <popup v-model="show" position="right" width="100%">
      <group title="收货人信息">
        <x-input title="姓名："  v-model="address.consignee"></x-input>
        <x-input title="电话：" v-model="address.phone" :max="11" keyboard="number"></x-input>
      </group>
      <group title="收货人地址">
        <x-address title="所在地区" v-model="xaddress" raw-value @on-hide="logHide" :list="addressData"></x-address>
        <x-textarea title="详细地址：" v-model="address.address" placeholder="街道、楼牌号等" :max="120"></x-textarea>
      </group>
      <box gap="20px 10px">
        <x-button type="warn" :disabled="disabled" @click.native="save()">保存</x-button>
      </box>
      <div class="close" @click="show = false">
        <i class="iconfont icon-fanhui"></i>
        <span>点击返回</span>
      </div> 
    </popup>
  </view-box>
</template>
<script>
  import { ViewBox, CheckIcon, XButton, Popup, Group, XInput, XAddress, XTextarea, Flexbox, FlexboxItem, ChinaAddressV4Data, Value2nameFilter as value2name, stringTrim, Box } from 'vux'
  import { SET_CHECKED_ADDRESS } from '@/store/mutation-types'
  export default {
    data () {
      return {
        defaultAddress: true,
        show: false,
        tempAddress: {
          id: null,
          consignee: '',
          phone: '',
          address: '',
          province: '贵州省',
          city: '贵阳市',
          district: '南明区'
        },
        address: {},
        xaddress: ['贵州省', '贵阳市', '南明区'],
        addressData: ChinaAddressV4Data
      }
    },
    components: {
      ViewBox,
      CheckIcon,
      XButton,
      Popup,
      Group,
      XInput,
      XAddress,
      XTextarea,
      Flexbox,
      FlexboxItem,
      Box
    },
    mounted () {
      this._resetAddressData()
      if (!this.$store.state.cart.addresses) {
        this.$store.dispatch('getAddresses')
      }
    },
    computed: {
      list () {
        return this.$store.state.address.list
      },
      disabled () {
        return (this.address.consignee && stringTrim(this.address.consignee) === '') ||
        (this.address.consignee && stringTrim(this.address.phone) === '') ||
        (this.address.consignee && stringTrim(this.address.address) === '')
      },
      referPage () {
        return this.$store.state.address.referPage
      }
    },
    methods: {
      logHide () {
        let addressData = this.getName(this.xaddress)
        addressData = addressData.split(' ')
        this.address.province = addressData[0]
        this.address.city = addressData[1]
        this.address.district = addressData[2]
      },
      getName (value) {
        return value2name(value, this.addressData)
      },
      edit (address) {
        this.address = Object.assign({}, address)
        this.xaddress = [address.province, address.city, address.district]
        this.show = true
      },
      add () {
        this._resetAddressData()
        this.show = true
      },
      save () {
        let action = this.address.id ? 'updateAddress' : 'addAddress'
        this.$store.dispatch(action, this.address).then((response) => {
          this.show = false
          this.$vux.toast.show('保存成功')
          this.jumpReferPage(response.data)
        }).catch((error) => {
          console.log(error)
        })
      },
      setDefault (address) {
        this.$store.dispatch('setDefaultAddress', address)
      },
      destory (index) {
        this.$store.dispatch('deleteAddress', index)
      },
      jumpReferPage (address) {
        if (this.referPage) {
          this.$store.commit(SET_CHECKED_ADDRESS, address)
          this.$router.replace(this.referPage)
        }
      },
      _resetAddressData () {
        this.address = Object.assign({}, this.tempAddress)
      }
    }
  }
</script>
<style scoped lang="less">
  .container {
    background: #f2f2f2;
  }
  .address {
    background-color: #fff;
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
  }
  .address .iconfont {
    font-size: 14px;
  }
  .address-main {
    padding: 15px;
    height: auto;
    color: #151516;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .address-box {
    flex: 1;
  }
  .refer-page {
    width: 14px;
    color: #999;
  }
  .address-user {
    margin-bottom: 4px;
  }
  .actions {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    height: 52px;
    line-height: 52px;
  }
  .btn-set-default {
    flex: 1;
  }
  .btn-edit, .btn-delete {
    width: 55px;
    padding-left: 10px;
    text-align: right;
  }
  .close {
    text-align:center; 
    margin-top: 30px; 
    color: #999;
  }
</style>